<template>
    <div class="dialog">
        <div class="inner-con">
            <span @click="$emit('close')">X</span>
            <h1>{{title}}</h1>
            <div>
                <span>价格</span>
                <div>
                    <span @click="reduce">-</span>
                    <span>{{dNum}}---{{num}}</span>
                    <span @click="add">+</span>
                </div>
            </div>
            <div class="btns">
                <button @click="$router.push({name:'car'})">充2赠1</button>
                <button @click="$router.push({name:'car'})">添加购物车</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['title','price','num','id'],
    data(){
        return {
            dNum:this.num
        }
    },
    watch:{
        num(val){
            console.log('------new',val);
            this.dNum = val
        }
    },
    methods:{
        reduce(){
            if(this.dNum > 1){
                this.dNum--
                this.$emit('reduce',this.dNum);
            }
        },
        add(){
            console.log(this.dNum)
            this.dNum++;
            this.$emit('add',this.dNum)
        }
    }
}
</script>
<style lang="scss">
    .dialog{
        width:100%;
        height:100%;
        position: absolute;
        top:0;
        left:0;
        z-index:9;
        background: rgba(0,0,0,.8);
    }
    .inner-con{
        width:80%;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate3d(-50%,-50%,0);
        background: #fff;
    }
</style>

